<template>
    <div @click="gotoDetails" class="match-card">
        <div class="match-img">
            <el-image  v-if="props.data?.cover" style="width: 282px; height: 190px" :src="props.data?.cover" fit="cover" />
            <el-image v-if="!props.data?.cover" style="width: 282px; height: 190px" :src="props.data?.imagrUrl" fit="cover" />
        </div>
        <div class="introduce">
            <div class="content">
                <div class="title">
                    <p>{{ props.data?.title }}</p>
                </div>
                <div class="organizer" v-if="props.data?.organizer">
                    <span>主办方:</span>
                    <span class="value">{{ props.data?.organizer }}</span>
                </div>
                <div class="time" v-if="props.data?.organizer">
                    <span>比赛时间:</span>
                    <span class="value">{{ props.data?.enrollStartDate }} ~ {{ props.data?.enrollEndDate }}</span>
                </div>
                 <!-- <div class="organizer" v-if="!props.data?.organizer">
                    <span>发布者:</span>
                    <span class="value">{{ props.data?.pushName }}</span>
                </div> -->
                 <div class="time" v-if="!props.data?.organizer">
                    <span>发布时间:</span>
                    <span class="value">{{ props.data?.pushTime }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ContestCardType } from "@/types/api";
import { defineProps } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

function gotoDetails() {
    const contestId = props.data?.id;
    const categoryId = props.data?.categoryId;
    const type = props.type;
    if (props.type === 0) {
        router.push({
            path: "/contest-details",
            query: { contestId, categoryId, type },
        });
    } else if (props.type === 1) {
        router.push({
            path: "/events-details",
            query: { contestId, categoryId, type },
        });
    } else {
        router.push({
            path: "/article-details",
            query: { contestId: contestId, type },
        });
    }
}

const props = defineProps<{
    data: ContestCardType;
    type: 0 | 1 | 2;
    categoryId: number;
}>();
</script>

<style lang="scss" scoped>
.match-card {
    width: 282px;
    height: 348px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    margin-top: 20px;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    margin-top: 20px;
    margin-right: 15px;
    .introduce {
        .content {
            padding: 10px;
            .title {
                font-size: 16px;
                margin-bottom: 10px;
                p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    height: 72px;
                }
            }
            .organizer,
            .time {
                color: #666;
                font-size: 13px;
                margin: 5px 0;
                .value {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>
